<template>
    <div class="resetPasswordTo">
         <header class="resetH">
          <a class="iconfont icon-fanhui"></a><h1>重置密码</h1>
        </header>
        <div class="steps">
            <el-steps :active="active" finish-status="success" space='30'>
            <el-step title="验证账号"></el-step>
            <el-step title="设置新密码"></el-step>
            </el-steps>
         </div>
        <div class="sendCode">
           <div class="sendCodeInfo">
                <div><span>验证码已发送到</span><em>{{tel}}</em><span>手机上</span></div>
           </div>
           <div class="sendCodeInput">
              <i class="iconfont icon-yanzhengma"></i><input type="text" placeholder="验证码" v-model="usercode" @input="judge"><a v-show="show" @click="getCode">获取验证码</a><a v-show="!show">{{count}}</a>
           </div>
       </div>
        <div class="password" >
              <i>新密码</i><input :type="type" placeholder="设置密码" v-model="password1" @input="judge"/> <span @click="hidden"><i></i></span>
          </div>
          <div class="password" >
              <i >再确认</i><input :type="type" placeholder="重复密码"  v-model="password2" @input="judge"/> <span><i ></i></span>
          </div>
           <div class="confirm">
             <van-button  type="primary" size="large" round :color='btnColor' @click="isLogin">确认</van-button>
         </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { Button, Toast } from 'vant'
import { updatePassword, getCode2 } from '@/utils/api.js'
Vue.use(Button).use(Toast)
export default {
  data () {
    return {
      active: 2,
      password1: '',
      password2: '',
      btnColor: '#c3c3c3',
      show: false,
      tel: '',
      usercode: '',
      count: '',
      type: 'password',
      code: ''
    }
  },
  mounted () {
    window.console.log(this.$route.query)
    this.tel = this.$route.query.tel
    getCode2(this.$route.query.tel).then(res => {
      window.console.log(res)
      this.code = res.code
    })
    const TIME_COUNT = 60
    if (!this.timer) {
      this.count = TIME_COUNT
      this.show = false
      this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count--
        } else {
          this.show = true
          clearInterval(this.timer)
          this.timer = null
        }
      }, 1000)
    }
  },
  methods: {
    judge () {
      if (this.password1 !== '' && this.password2 !== '') {
        this.btnColor = '#36bc7c'
      }
    },
    isLogin () {
      if (this.usercode * 1 === this.code) {
        Toast('验证码正确')
        if (/(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^[^\s\u4e00-\u9fa5]{6,20}$/.test(this.password1)) {
          Toast('密码符合')
          if (this.password2 === this.password1) {
            Toast('重置成功')
            updatePassword(this.tel, this.password1).then(() => {
              this.$router.replace('/login')
            })
          } else {
            Toast.fail('密码不一致')
          }
        } else {
          Toast.fail('密码格式不符合')
        }
      } else {
        Toast.fail('验证码不匹配')
      }
    },
    hidden () {
    },
    getCode () {
      getCode2(this.$route.query.tel).then(res => {
        window.console.log(res)
        this.code = res.code
      })
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    }
  }
}
</script>

<style lang="scss">
 .sendCode{
     background: #fff;
     height: auto;
     .sendCodeInfo{
     display: flex;
     justify-content: space-between;
     height: 0.44rem;
     align-items: center;
     font-size: 0.12rem;
     color:#989898;
     padding: 0.05rem 0.1rem;;
        em{
            color: #000;
            padding:0 0.04rem;
        }
     }
     .sendCodeInput{
       height: 0.5rem;
        display: flex;
        align-items: center;
        margin: 0.05rem 0.1rem;
        justify-content: space-between;
        border-bottom: 0.01rem solid #f2f2f2;
       i, a , input{
           display: inline-block;
       }
       a{
           color:#989898;
           font-size:0.12rem;
           border: 0.01rem solid #e4e2e2;
           border-radius: 0.08rem;
           width:0.8rem;
           height: 0.34rem;
           text-align: center;
           line-height: 0.34rem;
       }
       i{
         font-size: 0.14rem;
       }
       input{
           width:2.37rem;
           border:0;
       }
     }
 }
 .resetPasswordTo{
 .confirm{
     width: 3.25rem;
     margin: 0 auto;
 }
 .password{
         height: 0.45rem;
          display: flex;
         align-items: center;
         margin:0.2rem auto;
         border-bottom:0.01rem solid  #f7f7f7;
         width: 3.45rem;
        i{
            display: inline-block;
            font-size:0.14rem;
        }
        input{
         width:3rem;
         border:0;
         text-indent: 0.1rem;
     }
     }
 .resetH{
     background: #fff;
     height:0.44rem;
     display: flex;
     align-items: center;
     border-bottom: 0.01rem solid #f2f2f2;
     h1{
         font-size:0.18rem;
         display: inline-block;
         width: 100%;
         text-align: center;
         font-family: 'Microsoft Yahei';
         color:#030303;
         font-weight: 400;
         padding-right:0.6rem;
     }
     a{
         display: inline-block;
         font-size:0.18rem;
         width:0.4rem;
         height:0.44rem;
         margin-right: .2rem;
         color: #817f7f;
         display:flex;
         align-items: center;
         justify-content: center;
         font-weight: 500;
     }
 }
 }
 .steps{
    padding: 0.05rem 0.1rem;
    margin: 0.1rem auto;
    .el-step ,.is-horizontal{
    flex-basis:100% !important;
    margin-right: -2rem !important;
    }
    .el-step__icon.is-text{
        left: 0.8rem;
    }
    .el-step__title.is-success{
        margin-left: 0.56rem;
    }
    .el-step__title.is-process{
        margin-left: 0.56rem;
    }
}
</style>
